<template>
	<!-- 猜你喜欢 -->
	<view>
		<view class="caption">
			<text class="text">猜你喜欢</text>
		</view>
		<view class="guess">
			<navigator
				class="guess-item"
				v-for="item in guessList"
				:key="item.id"
				:url="`/pages/goods/goods?id=${item.id}`"
			>
				<image class="image" mode="aspectFill" :src="item.picture"></image>
				<view class="name">
					{{ item.name }}
				</view>
				<view class="price">
					<text class="small">¥</text>
					<text>{{ item.price }}</text>
				</view>
			</navigator>
		</view>
		<view class="loading-text">
			{{ fineshed ? '没有更多了' : '正在加载...' }}
		</view>
	</view>
</template>

<script>
import { getHomeGoodsGuessLikeAPI } from '@/services/home'
export default {
	data() {
		return {
			guessList: [],
			pageParams: {
				// 请求接口的参数
				page: 1,
				pageSize: 10,
			},
			fineshed: false, // 表示是否还有更多数据
		}
	},
	created() {
		this.getGuessList()
	},
	methods: {
		async getGuessList() {
			// 1、请求之前添加判断，如果没有更多数据，return代码，同时给用户提示
			if (this.fineshed) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
				})
				return
			}
			const res = await getHomeGoodsGuessLikeAPI(this.pageParams) // 请求接口的时候把请求参数传递过去
			this.guessList.push(...res.result.items)
			// 返回的结果，看一下是否有更多的数据，如果有页码自增，如果没有更多数据，让finished变为true

			if (this.pageParams.page < res.result.pages) {
				this.pageParams.page++
			} else {
				// 没有更多数据了
				this.fineshed = true
			}
		},
		// 重置数据
		async resetData() {
			// 1、参数页码数重置为1
			this.pageParams.page = 1
			// 2、数据要清空 >> 要获取最新的数据
			this.guessList = []
			// 3、完成的标识重置为false
			this.fineshed = false
			// 4、重新请求接口
			await this.getGuessList()
		},
	},
}
</script>

<style lang="scss">
:host {
	display: block;
}
/* 分类标题 */
.caption {
	display: flex;
	justify-content: center;
	line-height: 1;
	padding: 36rpx 0 40rpx;
	font-size: 32rpx;
	color: #262626;
	.text {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 28rpx 0 30rpx;

		&::before,
		&::after {
			content: '';
			width: 20rpx;
			height: 20rpx;
			background-image: url(@/static/images/bubble.png);
			background-size: contain;
			margin: 0 10rpx;
		}
	}
}

/* 猜你喜欢 */
.guess {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 20rpx;
	.guess-item {
		width: 300rpx;
		padding: 24rpx 20rpx 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
	}
	.image {
		width: 304rpx;
		height: 304rpx;
	}
	.name {
		height: 75rpx;
		margin: 10rpx 0;
		font-size: 26rpx;
		color: #262626;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.price {
		line-height: 1;
		padding-top: 4rpx;
		color: #cf4444;
		font-size: 26rpx;
	}
	.small {
		font-size: 80%;
	}
}
// 加载提示文字
.loading-text {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	padding: 20rpx 0;
}
</style>
